<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Example 19 (ALL) - Illustrating overlay alignments<</title>
<link rel="stylesheet" type="text/css" href="css/global.css" />
</head>
<body>
<script type="text/javascript">
var triggerFirebugConsole = window.console;
</script>
<h2>Example 19 (ALL) - Illustrating overlay alignments</h2>
<p class="example">
This example illustrates how to place overlays in different positions on the player screen. Several different regions are defined - 
bottom regions for center, left and right placement, a region for the center of the screen and a centered region for the top of
the screen. 2 seconds into the program, an overlay will appear in each of these regions one after each other for a duration of
5 seconds.
</p>
<br/>
<br/>
<embed 
  id="ply"
  data="../dist/4.5.swf"
  src="../dist/4.5.swf" 
  width="450"
  height="300"
  allowscriptaccess="always"
  allowfullscreen="true"
  flashvars="height=300&width=450&plugins=../dist/OpenAdStreamer.swf&config=config/all19.xml"
/>
<br/>
<p>
The configuration for this example is:
</p>
<div class="codebox">
<pre>
<code>
&lt;embed 
  id="ply"
  data="../dist/4.5.swf"
  src="../dist/4.5.swf" 
  width="450"
  height="300"
  allowscriptaccess="always"
  allowfullscreen="true"
  flashvars="height=300&width=450&plugins=../dist/OpenAdStreamer.swf&config=config/all19.xml"
/&gt;
</code>
</pre>
</div>
<p>
"http19.xml" is defined as:
</p>
<div class="codebox">
<pre>
<code class="xml">
&lt;config&gt;
  &lt;openadstreamer.title&gt;
      HTTP Example 19
  &lt;/openadstreamer.title&gt;
  &lt;openadstreamer.json&gt;
		{
            "shows": {
                "baseURL": "rtmp://ne7c0nwbit.rtmphost.com/videoplayer",
                "streams": [ { "file":"the-black-hole.mp4", "duration":"00:00:34" } ]
            },

            "overlays": {
                "regions": [
                    {
                      "id": "bottom-center",
                      "verticalAlign": "bottom",
                      "horizontalAlign": "center",
                      "backgroundColor": "#000000",
                      "opacity": 0.8,
                      "borderRadius": 15,
                      "padding": "-10 -10 -10 -10",
                      "width": 450,
                      "height": 50
                    },
                    {
                      "id": "bottom-center",
                      "verticalAlign": "bottom",
                      "horizontalAlign": "center",
                      "backgroundColor": "#000000",
                      "opacity": 0.8,
                      "borderRadius": 15,
                      "padding": "-10 -10 -10 -10",
                      "width": 450,
                      "height": 50
                    },
                    {
                      "id": "bottom-center",
                      "verticalAlign": "bottom",
                      "horizontalAlign": "left",
                      "backgroundColor": "transparent",
                      "padding": "-10 -10 -10 -10",
                      "width": 450,
                      "height": 50
                    },
                    {
                      "id": "bottom-left",
                      "verticalAlign": "bottom",
                      "horizontalAlign": "left",
                      "backgroundColor": "#000000",
                      "opacity": 0.8,
                      "borderRadius": 15,
                      "padding": "-10 -10 -10 -10",
                      "width": 450,
                      "height": 50
                    },
                    {
                      "id": "bottom-right",
                      "verticalAlign": "bottom",
                      "horizontalAlign": "right",
                      "backgroundColor": "#000000",
                      "opacity": 0.8,
                      "borderRadius": 15,
                      "padding": "-10 -10 -10 -10",
                      "width": 450,
                      "height": 50
                    },
                    {
                      "id": "screen-center",
                      "verticalAlign": "center",
                      "horizontalAlign": "center",
                      "backgroundColor": "#000000",
                      "opacity": 0.8,
                      "borderRadius": 15,
                      "padding": "-10 -10 -10 -10",
                      "width": 450,
                      "height": 50
                    },
                    {
                      "id": "top-center",
                      "verticalAlign": "top",
                      "horizontalAlign": "center",
                      "backgroundColor": "#000000",
                      "opacity": 0.8,
                      "borderRadius": 15,
                      "padding": "-10 -10 -10 -10",
                      "width": 450,
                      "height": 50
                    }
                ]
            },

            "ads": {
                "servers": [
                    {
                       "type": "OpenX",
                       "apiAddress": "http://openx.openvideoads.org/openx/www/delivery/fc.php",
                       "allowAdRepetition": true
                    }
                ],
                "schedule": [
                    {
                      "zone": "41",
                      "position": "bottom-center",
                      "width": 450,
                      "height": 50,
                      "startTime": "00:00:02",
                      "duration": "5"
                    },
                    {
                      "zone": "41",
                      "position": "bottom-left",
                      "width": 450,
                      "height": 50,
                      "startTime": "00:00:08",
                      "duration": "5"
                    },
                    {
                      "zone": "41",
                      "position": "bottom-right",
                      "width": 450,
                      "height": 50,
                      "startTime": "00:00:14",
                      "duration": "5"
                    },
                    {
                      "zone": "41",
                      "position": "screen-center",
                      "width": 450,
                      "height": 50,
                      "startTime": "00:00:20",
                      "duration": "5"
                    },
                    {
                      "zone": "41",
                      "position": "top-center",
                      "width": 450,
                      "height": 50,
                      "startTime": "00:00:26",
                      "duration": "5"
                    }
                ]
            },

            "debug": {
                "debugger": "firebug",
                "levels": "fatal"
            }
        }
  &lt;/openadstreamer.json&gt;
&lt;/config&gt;
</code>
</pre>
</div>
<script type="text/javascript" src="js/tracking.js">
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10158120-3");
if(TRACKING_TURNED_ON) {
	pageTracker._trackPageview();
}
} catch(err) {}
</script>
</body>
</html>
